<template>
    <div class="bingBox">
        <van-nav-bar
            left-arrow
            @click-left="onClickLeft"
            style="background: transparent;"
        />
        <van-form @submit="onSubmit">
            <h2>注册</h2>
            <van-cell-group inset>
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            
            <div style="margin: 35px">
          
                <van-button round block type="primary" native-type="submit">
                    注册
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import {useRegister} from '../hooks/register'
const {onClickLeft,password,username,onSubmit} =useRegister()

</script>

<style lang="scss" scoped>
.bingBox {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url(../../public/image/微信图片_20230208091605.jpg) ;
    background-size: 100% 100%;
    :deep(.van-icon:before) {
        color:#fff;
        font-size: 20px;
    }
    .van-form {
        text-align: center;
        h2{
            font-size: 40px;
            color: #fff;
            margin-bottom: 70px;
            text-shadow: 5px 5px 5px aliceblue, 0px 0px 2px aliceblue;
        }
        .van-cell-group{
            width: 80%;
            margin: 0 auto;

        }
      
    }
    :deep(.van-icon-arrow-left):before{
        font-size: 20px;
    }
    .van-nav-bar::after {
        border-bottom: 0;
        
    }   
}
</style>
